<template>
  <div class="table-container">
    <div class="title">
      <slot name="title"></slot>
    </div>
    <el-table
      border
      :lazy="true"
      style="width: 100%"
      :height="height"
      :data="listData">
      <template v-for="(item,index) in configData">
        <el-table-column
          v-if="item.button"
          :label="item.title"
          :width="item.width"
          align="center"
          >
          <template v-slot="{ row }">
            <slot name="button" :data="row"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :label="item.title"
          :width="item.width"
          :resizable="false"
          :show-overflow-tooltip="true"
          :prop="key[index]"
          align="center">
          <!-- 一个表格最多配置3个插槽pros  -->
          <template v-slot="{row}" v-if="item.propIndex === 1">
            <slot name="content1" :row="row"></slot>
          </template>
          <template v-slot="{row}" v-else-if="item.propIndex === 2">
            <slot name="content2" :row="row"></slot>
          </template>
          <template v-slot="{row}" v-else-if="item.propIndex === 3">
            <slot name="content3" :row="row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
/**
 * 数据原型
 * @param <Array> listData 对象数组
 * 表格配置
 * @param <Array> configData 对象数组
 * 是否显示操作按钮
 * @param <Boolean> showButton
 * 设置表格高度
 * @param <Number> height
 */
import {defineProps, reactive, watch} from 'vue';
const props = defineProps({
  listData: {
    type: Array,
    default: ()=>{
      return []
    }
  },
  height: [Number,String],
  configData: {
    type: [Array],
    default: () => {
      return []
    }
  }
})

let key = reactive<[]>([]);

const changeProp = ()=>{
  configData.forEach((item)=>{
    this.key.push(!item?.props ? '' : item.props)
  })
}
changeProp();
watch(configData,()=>{
  key = [];
  changeProp();
})
</script>
<style scoped lang="scss">
  //设置滚动条的宽度
  .table-container {
    width: 100%;
    &::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    // 设置滚动条的背景色和圆角
    &::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb  {
      -webkit-box-shadow: inset 0 0 5px rgba(50,150,250,1);
      background: rgba(50,150,250,1);
    }
    &::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F1F1F1;
    }
  }
  .title {
    margin: 10px 0;
  }
</style>
